<template>
	<view>
		<comTransition v-if="isComTransition" @updateParentData="updateParentData"/>
		<view class="privacy" v-if="!isComTransition">
			<!-- @click="comLink('/pages/privacy/search')" -->
			<swiper class="swiper" circular :vertical="true" :current="current" @change="changeVideo">
				<swiper-item class="swiper-item" v-for="(item,index) in list">
					<view class="videoImg" :class="isPop?'active':''" v-if="Math.abs(current - index) <= 1">
						<!-- #ifdef MP-WEIXIN -->
						<video :muted="isMuted" poster="https://siha.vxmeng.com/static/shu.jpg" :src="item.formal_file" :controls="!isPop" :autoplay="current == index" :loop="true" :id="index"></video>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
						<video :muted="isMuted" poster="https://siha.vxmeng.com/static/shu.jpg" :src="getImg(item.formal_file)" :controls="!isPop" :autoplay="current == index" :loop="true" :id="index"></video>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<video-player @error="videoError" :resource-id="item.resource_id+''" :seq-id="item.seq_id+''" cloud-type="1" :muted="isMuted" poster="https://siha.vxmeng.com/static/shu.jpg" :src="item.formal_file" :controls="!isPop" :autoplay="current == index" :loop="true" :id="index"></video-player>
						<!-- #endif -->
					</view>
					<view class="content" v-if="!isPop">
						<view class="t">
							<view class="l">
								<image v-if="item.is_like!=1" @click="doLikePleasure(item)"
									src="https://siha.vxmeng.com/static/privacy/1.png" mode="widthFix"></image>
								<image v-else @click="doLikePleasure(item)" src="https://siha.vxmeng.com/static/privacy/1_1.png" mode="widthFix"></image>
								<image @click="getComment(item)" src="https://siha.vxmeng.com/static/privacy/2.png" mode="widthFix"></image>
								<!-- #ifdef H5 -->
								<image @click="messageFun('share')" src="https://siha.vxmeng.com/static/more/share.png" mode="widthFix"></image>
								<!-- #endif -->
								<!-- #ifndef H5 -->
								<button class="share" open-type="share">
									<image src="https://siha.vxmeng.com/static/more/share.png" mode="widthFix"></image>
								</button>
								<!-- #endif -->
							</view>
							<view class="r">
								<text>{{getDiffTime(item.create_time)}}</text>
							</view>
						</view>
						<text class="m">{{item.like_num}}{{$t('smkj.dianz')}}</text>
						<!-- <text class="m">{{$t('smkj.dianz')}}</text> -->
						<text class="tit">{{item.name}}</text>
						<!-- <text class="b">{{$t('smkj.plzs')}}</text> -->
						<text class="b">{{item.remark_num}}{{$t('smkj.plzs')}}</text>
					</view>
				</swiper-item>
			</swiper>
			
			<view v-if="isPop" :class="isPop ? 'comment active':'comment'">
				<image @click="isPop = false" src="https://siha.vxmeng.com/static/index/close.png" mode=""></image>
				<view class="commList">
					<view v-for="(commItem, commIndex) in commentList" class="comm-item">
						<view class="lef">
							<image :src="getImg(commItem.user_avatar)" mode=""></image>
						</view>
						<view class="rig">
							<view class="comm-top">
								<text class="name">{{commItem.user_nickname}}</text>
							</view>
							<view class="text">{{commItem.remark}}</view>
							<view class="bot">
								<view class="left">
									<text>{{getDiffTime(commItem.create_time)}}</text>
									<text class="reply" @click="onReply(commItem.id, commItem.user_nickname)">{{$t('smkj.hf')}}</text>
								</view>
								
								<view class="right">
									<image v-if="commItem.is_like!=1" @click="doLikeComment(commItem)"
										src="https://siha.vxmeng.com/static/privacy/1.png" mode="widthFix"></image>
									<image v-else @click="doLikeComment(commItem)" src="https://siha.vxmeng.com/static/privacy/1_1.png" mode="widthFix"></image>
									<text>{{commItem.like_num}}</text>
								</view>
							</view>
							
							<!-- 二级评论 -->
								<view class="comm-item" v-for="twoRemark in commItem.twoRemark">
									<view class="lef">
										<image :src="getImg(twoRemark.user_avatar)" mode=""></image>
									</view>
									<view class="rig">
										<view class="comm-top">
											<text class="name">{{twoRemark.user_nickname}}</text>
										</view>
										<view class="text">{{twoRemark.remark}}</view>
										<view class="bot">
											<view class="left">
												<text>{{getDiffTime(twoRemark.create_time)}}</text>
												<text class="reply" @click="onReply(commItem.id, twoRemark.user_nickname)">{{$t('smkj.hf')}}</text>
											</view>
											
											<view class="right">
												<image v-if="twoRemark.is_like!=1" @click="doLikeComment(twoRemark)"
													src="https://siha.vxmeng.com/static/privacy/1.png" mode="widthFix"></image>
												<image v-else @click="doLikeComment(twoRemark)" src="https://siha.vxmeng.com/static/privacy/1_1.png" mode="widthFix"></image>
												<text>{{twoRemark.like_num}}</text>
											</view>
										</view>
									</view>
								</view>
							<view class="more" v-if="commItem.second_replay_num && commItem.twoRemark.length<commItem.second_replay_num" @click="getMore(list[current].id, commItem)">展开 {{commItem.second_replay_num}} 条回复</view>
						</view>
					</view>
				</view>
				<view class="write" v-if="!isfocus_2">
					<!-- <input type="text" v-model="remark" placeholder="留下你的评论吧" @confirm="doRemarkPleasure(list[current])"/> -->
					<input :adjust-position="false" type="text" :placeholder="$t('smkj.lxndpl')" :focus="isFocus" @focus="inputBindFocus" />
					<!-- <image @click="doRemarkPleasure(list[current])" src="https://siha.vxmeng.com/static/privacy/3.png" mode="widthFix"></image> -->
				</view>
			</view>
			
			<view class="replyBox" v-if="isReplyPop" @click="hidePop">
				<view class="write" :style="{'bottom': bottom+'px'}" @click.stop="">
					<input @blur="inputBindBlur" :adjust-position="false" :focus="isfocus_2" @focus="inputOnFocus"
						type="text" v-model="remark" :placeholder="replyObj.placeholder" @confirm="doRemarkPleasure(list[current])"/>
					<image @click="doRemarkPleasure(list[current])" src="https://siha.vxmeng.com/static/privacy/3.png" mode="widthFix"></image>
				</view>
			</view>
			
			<!-- <tabBar></tabBar> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				remark:"",
				current:0,
				list: [],
				commentList: [],
				titleHeight: 0,
				isPop: false,
				replyObj:{},
				isReplyPop: false,
				tabBarHeight: 0,
				bottom: 0,
				isFocus: false,
				isfocus_2: false,
				isComTransition: true,
				isMuted:false
			};
		},
		// onShareAppMessage() {
		// 	return {
		// 		title: '嘶哈嘶哈', //分享的名称
		// 		path: '/pages/index/index',
		// 		//页面的路径
		// 		imageUrl: 'https://siha.vxmeng.com/static/logo.png'
		// 	}
		// },
		// //分享到朋友圈
		// onShareTimeline() {
		// 	return {
		// 		title: '嘶哈嘶哈',
		// 		path: '/pages/index/index',
		// 		imageUrl: 'https://siha.vxmeng.com/static/logo.png'
		// 	}
		// },		
		onReady() {
			if(this.$music.bgmInstance){
				this.$music.bgmInstance.destroy();
				this.$music.bgmInstance = null;
			}
		},
		onHide() {
			// this.isMuted = true
		},
		onLoad() {
			// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
			this.getHeight();
			// #endif
			this.commentList = []
			setTimeout(()=>{
				let systemInfo =uni.getSystemInfoSync();
				this.tabBarHeight= systemInfo.screenHeight - systemInfo.windowHeight;
				console.log(systemInfo.windowHeight);
			}, 100)
		},
		onShow() {
			// this.isMuted = false
			setTimeout(()=>{
				if(this.$music.bgmInstance){
					this.$music.bgmInstance.destroy();
					this.$music.bgmInstance = null;
				}
			}, 0)
			this.getPleasureInfoLike()
		},
		methods: {
			updateParentData(){
				this.isComTransition = false;
			},
			hidePop(){
				// #ifdef H5
				uni.showTabBar()
				// #endif
				this.bottom = 0
				this.isfocus_2 = false
				this.isFocus = false
				this.isReplyPop = false
				this.replyObj = {}
			},
			inputBindFocus(e) {
				if(!this.replyObj.id){
					this.replyObj.id = '';
					this.replyObj.placeholder = this.$t('smkj.lxndpl');
				}
				// #ifdef H5
				uni.hideTabBar()
				// #endif
				this.bottom = e.detail.height - this.tabBarHeight;
				console.log(e.detail.height, this.tabBarHeight);
				// #ifdef MP-TOUTIAO
					this.bottom = e.detail.height;
				// #endif
				this.isReplyPop = true;
				this.isfocus_2 = true
			},
			inputBindBlur() {
				this.bottom = 0
				// #ifdef H5
				uni.showTabBar()
				// #endif
			},
			inputOnFocus(e){
				// #ifdef H5
				uni.hideTabBar()
				// #endif
				this.bottom = e.detail.height - this.tabBarHeight;
				// #ifdef MP-TOUTIAO
					this.bottom = e.detail.height;
				// #endif
			},
			onReply(id, nickname){
				this.replyObj.id = id;
				this.replyObj.placeholder = this.$t('smkj.hf') + ' @' + nickname;
				this.isFocus = true
			},
			async getMore(pleasure_info_id, pleasure_remark){
				const res = await this.$myRequest({
					url: '/api/pleasure/getPleasureRemark',
					method: "GET",
					data: {
						pleasure_info_id,
						pleasure_remark_id: pleasure_remark.id,
						// pleasure_info_id: 5,
						// pleasure_remark_id: 293,
					}
				})
				pleasure_remark.twoRemark = res.data.list
			},
			async doRemarkPleasure(item) {
				if(!this.remark){
					this.$tools.showTx(this.$t('smkj.qsrpl'))
					return
				}
				const res = await this.$myRequest({
					url: 'api/pleasure/doRemarkPleasure',
					data: {
						pleasure_info_id:item.id,
						pleasure_remark_id: this.replyObj.id,
						remark:this.remark
					}
				})
				if (res.code == 1) {
					this.getComment(this.list[this.current])
					this.getMore(item.id, this.replyObj)
					this.hidePop()
					this.remark = ''
				}
			},
			getDiffTime(time) {
				const toDay = new Date();
				const targetDate = new Date(time);
				const diffTime = toDay.getTime() - targetDate.getTime();
				const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
		
				if (targetDate.getFullYear() < toDay.getFullYear()) { // 去年及更早的情况
					if(uni.getStorageSync('onLanguage') == 'en'){
						return months[targetDate.getMonth()] + ' ' + targetDate.getDate() + ', ' + targetDate.getFullYear();
					}
					return targetDate.getFullYear() + this.$t('smkj.n') + (targetDate.getMonth() + 1) + this.$t('smkj.y') + targetDate.getDate() + this.$t('smkj.r');
				} else if (diffTime < 60000) { // 小于一分钟
					return this.$t('smkj.gg');
				} else if (diffTime < 3600000) { // 小于一小时
					return Math.floor(diffTime / 60000) + this.$t('smkj.fzq');
				} else if (diffTime < 86400000) { // 大于等于1小时小于一天的情况
					return Math.floor(diffTime / 3600000) + this.$t('smkj.xsq');
				} else if (diffTime < 172800000) { // 大于一天小于两天的情况
					return 1 + this.$t('smkj.tq');
				} else { // 大于两天的情况
					if(uni.getStorageSync('onLanguage') == 'en'){
						return months[targetDate.getMonth()] + ' ' + targetDate.getDate();
					}
					return (targetDate.getMonth() + 1) + this.$t('smkj.y') + targetDate.getDate() + this.$t('smkj.r');
				}
			},
			changeVideo(e){
				this.current = e.detail.current
				this.isPop = false;
				const preRefs = uni.createVideoContext(`${this.current - 1}`);//上一页的video实例
				const refs = uni.createVideoContext(`${this.current}`);//当前页的video实例
				const nextRefs = uni.createVideoContext(`${this.current + 1}`);//下一页的video实例
				refs.play()
				preRefs.pause()
				nextRefs.pause()
			},
			async doLikePleasure(item) {
				console.log(item);
				const res = await this.$myRequest({
					url: 'api/pleasure/doLikePleasure',
					data: {
						pleasure_info_id: item.id,
						pleasure_remark_id: ''
					}
				})
				if (res.code == 1) {
					console.log(res)
					if(item.is_like==2){
						item.is_like=1
						item.like_num++
					}else{
						item.is_like=2
						item.like_num--
					}
					// this.getPleasureInfoLike()
				}
			},
			async getPleasureInfoLike() {
				const res = await this.$myRequest({
					url: 'api/pleasure/getPleasureInfoLike',
					data: {
						source: 1,
						page: '1',
						page_size: '3'
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.list = res.data.list
				}
			},
			async getComment(item){
				this.isPop = true;
				const res = await this.$myRequest({
					url: '/api/pleasure/getPleasureRemark',
					method: "GET",
					data: {
						pleasure_info_id: item.id,
						pleasure_remark_id: '',
						page: '1',
						page_size: '30'
					}
				})
				if(res.code == 1){
					console.log(res);
					// this.commentList = res.data.list
					this.commentList = res.data.list.map(item => {
						return{
							...item,
							twoRemark: []
						}
					})
					this.commentList = [...this.commentList]
				}
			},
			async doLikeComment(item){
				const res = await this.$myRequest({
					url: 'api/pleasure/doLikePleasure',
					data: {
						pleasure_info_id: this.list[this.current].id,
						pleasure_remark_id: item.id
					}
				})
				if (res.code == 1) {
					console.log(res)
					if(item.is_like==2){
						item.is_like=1
						item.like_num++
					}else{
						item.is_like=2
						item.like_num--
					}
				}
				// item.like_num = item.is_like == 1?item.like_num-1:item.like_num+1
				// item.is_like = item.is_like == 1?0:1
			},
			// 获取微信右上角胶囊高度
			getHeight() {
				let res = wx.getMenuButtonBoundingClientRect();
				this.titleHeight = res.top;
			},
			videoError(e){
				console.log(111,e)
			},
		}
	}
</script>

<style lang="less" scoped>
	.privacy {
		background-color: #101722;

		.videoImg {
			width: 100%;
			// height: calc((100vh - 100rpx) * 0.8);
			height: calc(100vh - 280rpx);
			/* #ifdef H5 */
			height: calc(100vh - 380rpx);
			/* #endif */
			// transition: all .5s;
			&.active{
				height: 40vh;
				/* #ifdef H5 */
				height: calc(40vh - 100rpx);
				/* #endif */
			}

			image,
			video,video-player {
				width: 100%;
				height: 100%;
			}
		}

		.swiper {
			width: 100%;
			height: 100vh;
			// height: calc(100vh - 150rpx);
			/* #ifdef H5 */
			height: calc(100vh - 100rpx);
			/* #endif */

			.swiper-item {
				width: 750rpx;
				height: 100%;
				position: relative;
			}
		}

		.content {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.t {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #D8D8D8;
				font-size: 32rpx;
				margin-bottom: 16rpx;

				.l {
					display: flex;
					align-items: center;

					button {
						margin: 0;
						display: flex;
						align-items: center;
						
						image{
							height: 34rpx !important;
						}
					}

					image {
						width: 40rpx;
						margin-right: 40rpx;
					}
				}
			}

			.m {
				font-size: 24rpx;
				color: #D8D8D8;
				font-weight: 400;
				opacity: 0.6;
			}

			.tit {
				color: #D8D8D8;
				font-size: 36rpx;
				font-weight: 400;
				margin: 30rpx 0 20rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				-webkit-line-clamp: 1;
				text-overflow: ellipsis;
			}

			.b {
				font-size: 24rpx;
				color: #D8D8D8;
				font-weight: 400;
				opacity: 0.6;
			}
		}
		.comment{
			width: 100%;
			height: 60%;
			border-radius: 8px 8px 0px 0px;
			transition: all .5s;
			// background: linear-gradient(144deg, rgba(0, 0, 0, 0.5647) 0%, rgba(0, 0, 0, 0.6126) 98%, rgba(30, 36, 44, 0.65) 98%);
			background-color: #101722;
			box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.3);
			position: fixed;
			bottom: -60vh;
			z-index: 101;
			&.active{
				bottom: 0rpx;
				/* #ifdef H5 */
				bottom: 100rpx;
				/* #endif */
			}
			&>image{
				width: 40rpx;
				height: 40rpx;
				padding: 10rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				box-sizing: content-box;
			}
			
			.commList{
				// height: calc(100% - 240rpx);
				height: calc(100% - 100rpx);
				padding-bottom: 140rpx;
				box-sizing: border-box;
				// padding: 0 40rpx;
				margin-top: 100rpx;
				overflow-y: auto;
				
				.comm-item{
					display: flex;
					margin-top: 16rpx;
					color: #d8d8d8;
					.lef{
						padding-top: 10rpx;
						image{
							border-radius: 50%;
							border: 2rpx solid #fff;
						}
					}
					
					.rig{
						flex: 1;
						margin-left: 20rpx;
						.comm-top{
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 20rpx;
							font-size: 24rpx;
						}
						.text{
							font-size: 28rpx;
							margin-bottom: 10rpx;
						}
						.bot{
							height: 34rpx;
							font-size: 22rpx;
							line-height: 34rpx;
							margin-bottom: 14rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.left{
								text{
									margin-right: 20rpx;
								}
							}
							.right{
								display: flex;
								align-items: center;
								image{
									width: 30rpx;
									height: 30rpx;
									margin-right: 10rpx;
								}
							}
						}
						.more{
							color: #999;
							font-size: 24rpx;
							position: relative;
							line-height: 48rpx;
							top: -8rpx;
						}
					}
					
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
				
				>.comm-item{
					border-bottom: 2rpx solid rgba(#999, .6);
					padding: 0 40rpx;
				}
			}
			
			.write{
				position: absolute;
				bottom: 0;
				height: 140rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0 60rpx;
				border-top: 2rpx solid #666;
				display: flex;
				align-items: center;
				background-color: #101722;
				input{
					flex: 1;
					height: 60rpx;
					border-radius: 24rpx;
					background-color: rgba(77, 77, 77);
					text-align: center;
					color: #666;
				}
				image{
					width: 45rpx;
					margin-left: 40rpx;
				}
			}
		}
	}
	
	.replyBox{
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 102;
		background-color: rgba(0, 0, 0, .6);
		.write{
			position: absolute;
			bottom: 0;
			height: 140rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 60rpx;
			border-top: 2rpx solid #666;
			display: flex;
			align-items: center;
			background-color: rgb(44,44,44);
			input{
				flex: 1;
				height: 60rpx;
				border-radius: 24rpx;
				background-color: rgba(77, 77, 77);
				text-align: center;
				color: #f1f1f1;
			}
			image{
				width: 45rpx;
				margin-left: 40rpx;
			}
		}
	}
</style>